<template>
  <view class="container">
    <view class="idiom-study-box">
      <view class="title-box">
        <uni-easyinput
          v-model="inputValue"
          prefix-icon="search"
          placeholder="查找人物"
          :focus="true"
          @input="input"
          @focus="isShow = true"
          @blur="isShow = false"
        >
        </uni-easyinput>
      </view>

      <view v-if="isShow" class="show-list">
        <view
          v-for="(item, index) in nameList"
          :key="index"
          class="show-list-item"
          @click="checkedSearchHandle(item)"
          >{{ item.name }}</view
        >
      </view>
    </view>

    <template v-if="!isShow">
      <view v-for="(item, index) in nameList" :key="index" class="idiom-box">
        <view class="idiom-text">
          <text class="word">{{ item.name }}</text>
        </view>

        <uni-section title="介绍" type="line">
          <uni-card>
            <text class="uni-body">{{ item.description }}</text>
          </uni-card>
        </uni-section>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { debounce } from 'lodash-es'

import * as Api from '@/apis/shen-lun/person-deeds'

const nameList = ref<Api.PersonDeeds[]>([])

const inputValue = ref('')

const isShow = ref(false)

const input = debounce(async (e: string) => {
  console.log(e)

  const res = await Api.search({
    keyword: e,
  })
  nameList.value = res.data
}, 500)

const detailData = ref()

/**
 * 选择搜索结果
 */
const checkedSearchHandle = async (item: Api.PersonDeeds) => {
  console.log(item.id)
  inputValue.value = item.name
  const res = await Api.detail({
    id: item.id,
  })

  if (res.status) {
    detailData.value = res.data
    nameList.value = []
    nameList.value.push(res.data)
  }

  console.log(res)
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 40rpx;

  .show-list {
    width: 100%;

    .show-list-item {
      width: 100%;
      height: 75rpx;
      border-bottom: 1rpx solid #fafafa;
      display: flex;
      align-items: center;
    }
  }

  .idiom-study-box {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 40rpx;
    margin-bottom: 20rpx;

    .title-box {
      width: 100%;

      .title {
        font-size: 1.35rem;
        font-weight: 700;
      }

      .des {
        color: #262e3e;
        margin-top: 20rpx;
      }
    }

    .action-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 50rpx;

      .but {
        width: 45%;
        height: 75rpx;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
      }

      .start-test {
        background-color: rgba(#2979ff, 0.2);
        color: #2979ff;
      }

      .start-study {
        background-color: #2979ff;
        color: #fff;
      }
    }
  }

  .idiom-box {
    width: 100%;
    height: auto;
    background-color: #fff;
    margin-top: 20rpx;
    border-radius: 20rpx;

    .idiom-text {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .word {
        font-size: 1.5rem;
        font-weight: 700;
        margin-top: 20rpx;
      }

      > .pinyin {
        margin-top: 10rpx;
      }
    }

    .idiom-meaning-box {
      width: 100%;
      margin-top: 50rpx;
    }
  }
}
</style>
